<template>
  <div class="base-component">
    <img src="/dialog_img.png" alt="Base" class="base-image" />
    <slot name="animation"></slot> <!-- 动效组件插槽 -->
  </div>
</template>

<style scoped>
.base-component {
  position: fixed; /* 固定定位 */
  top: 80%; /* 垂直居中偏下 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 使其真正居中 */
  width: 1000px; /* 设置固定宽度，根据需要调整 */
  min-width: 900px;
  padding: 20px; /* 根据需要设置内边距 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 添加阴影以提高视觉效果 */
}

.base-image {
  width: 100%; /* 根据需要设置宽度 */
  height: auto; /* 保持比例 */
}

</style>
